import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Vant from "vant";
import "vant/lib/index.css";
import loading from "@/assets/loading.gif";

const app = createApp(App);
app.directive("my-lazy", {
  mounted(el, binding) {
    el.src = loading;

    document.addEventListener("scroll", () => {
      isShow(el);
    });

    function isShow(el) {
      const scrollTop = document.documentElement.scrollTop;
      const clientH = document.documentElement.clientHeight;
      const offsetTop = el.offsetTop;
      if (offsetTop < scrollTop + clientH) {
        setTimeout(() => {
          el.src = binding.value;
        }, Math.random() * 5000);
      }
    }

    isShow(el);
  },
});

app.use(store);
app.use(router);
app.use(Vant);
app.mount("#app");
